<style>
/*标签切换*/
.account-option {
  margin-bottom: 1em;
}
.account-option hr{
  height: 0;
  border: none;
  border-bottom: 1px solid #ccc;
  margin: 0;
}
.account-option ul {
  padding: 0 2em;
}
.account-option ul li {
  width: 200px;
  margin: 1px 2em -1px 2em;
}
.account-option ul li.curs{
  background: #fff;
  color: inherit;
  border: 1px solid #ccc;
  border-bottom: none;
}

/*基本信息*/
.basic-info-detail {
  padding: 1em 0;
}
.basic-info-detail ul li {
  line-height: 2.5;
}
.basic-info-btn {
  margin-top: 1em;
}

/*账号信息*/
.account-record {
  margin-top: .3em;
}
.account-record tr{
  border-bottom: 1px solid #e3e3e3;
}
.account-record td{
  white-space: nowrap;
  text-align: center;
}
.account-record th{
  background: #e8e9eb;
  font-weight: normal;
}
.account-record .link {
  color: #369;
  text-decoration: underline;
}
.partner-account-detail .orange{
  color: #FE8F00;
}
.edit-info {
  padding: 2em 0;
  border-top: 1px solid #E3E3E3;
  margin-top: 2em;
}
</style>
<div class="partner-account-detail">
  <div class="heading">
    <strong><?php echo L('Account_information'); ?></strong>
  </div>
  <div class="account-option js-account-option">
    <ul class="clearfix">
      <li id="basic-info" class="col-md-4 btn curs"><?php echo L('userinfo')?></li>
      <li id="account-info" class="col-md-4 btn"><?php echo L('account_balance')?></li>
    </ul>
    <hr>
  </div>
  <div class="user-info-wrap">
    <div class="basic-info">
      <div class="clearfix basic-info-detail" >
        <img src="<?php echo $user['user_photo'] ? $user['user_photo'] : '/statics/front/images/user/avatar.jpg';?>" class="col-md-3 col-sm-3">
        <div class="col-md-9 col-sm-9">
          <ul>
            <li><?php echo L('_name_')?>:&nbsp;&nbsp;<?php echo isset($user['first_name']) ? $user['first_name'] : null ?></li>
            <li><?php echo L('userphone')?>:&nbsp;&nbsp;<?php echo isset($user['phone']) ? $user['phone'] : null ?></li>
            <li><?php echo L('useremail')?>:&nbsp;&nbsp;<?php echo isset($user['email']) ? $user['email'] : null ?></li>
            <li><?php echo L('address');?>:&nbsp;&nbsp;<?php echo isset($user['data']['address']) ? $user['data']['address'] : null ?>
                &nbsp;&nbsp;<?php echo isset($user['data']['city']) ? $user['data']['city'] : null ?>
                &nbsp;&nbsp;<?php echo isset($user['data']['province']) ? $user['data']['province'] : null ?>
                &nbsp;&nbsp;<?php echo $countryName;?>
            </li>
          </ul>
        </div>
      </div>
      <div class="basic-info-btn">
        <button class="btn" id="edit-info"><?php echo L('Modify_Your_Information')?></button>
        <button class="btn" id="edit-pwd"><?php echo L('Edit_Your_Password')?></button>
      </div>
      <div class="edit-info" hidden>
        <form action="<?php echo url('partner/info');?>" method="post" enctype="multipart/form-data" class="col-md-8 form-box js-edit-info-form">
          <table>
            <tr>
              <th class="align-right" width="25%"><?php echo L('fristname')?>:</th>
              <td><input type="text" name="first_name" value="<?php echo isset($user['first_name']) ? $user['first_name'] : null; ?>"></td>
            </tr>
            <tr>
              <th class="align-right"><?php echo L('userphone');?>:</th>
              <td><input type="text" name="phone" value="<?php echo isset($user['phone']) ? $user['phone'] : null; ?>"/></td>
            </tr>
            <tr>
              <th class="align-right"><?php echo L('useremail');?>:</th>
              <td><?php echo isset($user['email']) ? $user['email'] : null; ?></td>
            </tr>
            <tr>
              <th class="align-right"><?php echo L('country'); ?>:</th>
              <td>
                <select name="data[country_id]" title="<?php echo L('choosecountry'); ?>">
                  <option value="0">选择国家</option>
                  <?php
                    if(isset($countryList) && $countryList):
                      foreach($countryList as $country):
                  ?>
                  <option value="<?php echo $country['id']; ?>"<?php if($user['data']['country_id'] == $country['id'])echo ' selected';?>><?php echo $country['name']; ?></option>
                  <?php
                      endforeach;
                    endif;
                  ?>
                </select>
              </td>
            </tr>
            <tr>
              <th class="align-right"><?php echo L('state');?>:</th>
              <td><input type="text" name="data[province]" value="<?php echo isset($user['data']['province']) ? $user['data']['province'] : null; ?>"></td>
            </tr>
            <tr>
              <th class="align-right"><?php echo L('city');?>:</th>
              <td><input type="text" name="data[city]" value="<?php echo isset($user['data']['city']) ? $user['data']['city'] : null; ?>"></td>
            </tr>
            <tr>
              <th class="align-right"><?php echo L('address');?>:</th>
              <td><input type="text" name="data[address]" value="<?php echo isset($user['data']['address']) ? $user['data']['address'] : null; ?>"></td>
            </tr>
          </table>
          <div class="align-center">
            <input type="submit" name="dosubmit" value="<?php echo L('saveuser'); ?>" class="btn">
          </div>
        </form>
      </div>
    </div>
    <div class="account-info accountShow" hidden></div>
    <div class="col-md-8 edit-pwd" hidden>
      <form action="<?php echo url('partner/user_password') ?>" method="post" name="changePwdForm" id="changePwdForm">
        <table cellpadding="0" cellspacing="0" class="user-center-fields">
          <tr>
            <td class="align-right" width="25%"><?php echo L('loginname')?>:</td>
            <td><?php echo isset($user['email']) ? $user['email'] : null ?></td>
          </tr>
          <tr>
            <td class="align-right"><i class="asterisk">*</i><?php echo L('oldpassword')?>:</td>
            <td><input type="password" name="oldpassword" pattern="^\S{6,32}$" alt="<?php echo L('pwtipod');?>" /></td>
          </tr>
          <tr>
            <td class="align-right"><i class="asterisk">*</i><?php echo L('newpassword')?>:</td>
            <td><input type="password" name="password" pattern="^\S{6,32}$" bind='confirm_password' alt="<?php echo L('pwtip');?>" /></td>
          </tr>
          <tr>
            <td class="align-right"><i class="asterisk">*</i><?php echo L('doublenpw')?>:</td>
            <td><input type="password" name="confirm_password" pattern="^\S{6,32}$" bind='password' alt="<?php echo L('pwtip');?>" /></td>
          </tr>
        </table>
        <div class="align-center">
          <input type="submit" name="dosubmit" value="<?php echo L('saveuser'); ?>" class="btn">
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function accountShow(page) {
  $.ajax({
    type: 'GET',
    url: '/partner/account_detail',
    data: {'p': page},
    success: function (content) {
      $('.accountShow').html(content);
    }
  });
}

$(function () {
  accountShow(1);

  $(".js-account-option").on("click", ".btn", function () {
    var _self = $(this);
    _self.addClass("curs").siblings().removeClass("curs");
    $("." + _self.attr("id")).show().siblings().hide();
  });

  $(".basic-info-btn").on("click","#edit-pwd",function(){
    $(".user-info-wrap").find(".edit-pwd").show().siblings().hide();
  });
  $(".basic-info-btn").on("click","#edit-info",function(){
    $(".user-info-wrap").find(".edit-info").stop(true,false).slideToggle();
  });

  $(".js-edit-info-form").validate({
    errorElement: 'p',
    submitHandler: function (form) {
      form.submit();
    },
    errorPlacement: function (error, element) {
      element.after(error);
    },
    rules: {
      first_name: 'required',
      phone: 'required',
      'data[country_id]': {
        required: true,
        min: 1
      },
      'data[province]': 'required',
      'data[city]': 'required',
      'data[address]':'required'
    }
  });
});
</script>